<template>
  <div class="container">
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <van-search
      v-model="keywords"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />

    <van-cell-group class="suggest-box" v-if="keywords">
      <!-- span高亮联想关键词 -->

      <!-- 第一种 -->
      <!-- <van-cell
        icon="search"
        @click="onSearch(item)"
        v-for="item in suggestionwords"
        :key="item"
        ><p>
          {{ item.split(keywords)[0] }}<span>{{ keywords }}</span
          >{{ item.split(keywords)[1] }}
        </p></van-cell
      > -->

      <!-- 第二种 -->
      <van-cell
        icon="search"
        @click="onSearch(item.replace(`<span>${keywords}</span>`, keywords))"
        v-for="item in suggestionwords"
        :key="item"
        ><p v-html="item"></p
      ></van-cell>
    </van-cell-group>

    <div class="history-box" v-else>
      <div class="head">
        <span>历史记录</span>
        <van-icon name="delete"></van-icon>
      </div>
      <van-cell-group>
        <van-cell
          v-for="item in historyList"
          :key="item"
          @click="onSearch(item)"
        >
          <a class="word_btn">{{ item }}</a>
          <van-icon class="close_btn" slot="right-icon" name="cross" />
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { getWordsSuggestApi } from '@/api/search'
const TTHistory = 'TT_History'
// localStorage.setItem(TTHistory, JSON.stringify(['小米', '华为', '阿里巴巴']))
export default {
  name: 'search-index',
  data () {
    return {
      timeId: 0,
      suggestionwords: [],
      keywords: '',
      historyList: JSON.parse(localStorage.getItem(TTHistory)) || []
    }
  },
  watch: {
    historyList (newValue) {
      localStorage.setItem(TTHistory, JSON.stringify(newValue))
    },
    keywords () {
      !this.keywords && this.timeId && clearTimeout(this.timeId)
      this.suggestionwords = []
      this.timeId = setTimeout(() => {
        try {
          this.getWordsSuggest()
        } catch (error) {
          console.log(error)
        }
      }, 1000)
    }
  },
  methods: {
    onSearch (val) {
      const setList = new Set(this.historyList)
      setList.add(val)
      this.historyList = [...setList]
      this.$router.push('/search/result?q=' + val)
    },
    // 第一种:简单
    // async getWordsSuggest () {
    //   const { data } = await getWordsSuggestApi(this.keywords)
    //   this.suggestionwords = data.options
    //   console.log(this.keywords)
    //   console.log(this.suggestionwords)
    //   console.log(data)
    // }

    // 第二种:多次运用方法
    async getWordsSuggest () {
      const { data } = await getWordsSuggestApi(this.keywords)
      this.suggestionwords = data.options.map(word => word.toLowerCase().replace(this.keywords, `<span>${this.keywords}</span>`))
      console.log(this.keywords)
      console.log(this.suggestionwords)
      console.log(data)
    }

  }
}
</script>

<style scoped lang='less'>
.suggest-box {
  /deep/ .van-cell {
    padding: 10px 20px;
    color: #999;
    p {
      span {
        color: red;
      }
    }
  }
}

.history-box {
  padding: 0 20px;
  .head {
    line-height: 36px;
    color: #999;
    text-align: left;
    .van-icon {
      font-size: 16px;
      float: right;
      margin-top: 10px;
    }
  }
  .van-cell {
    padding: 10px 0;
  }
  .word_btn {
    color: #3296fa;
  }
  .close_btn {
    margin-top: 5px;
    color: #999;
  }
}
</style>
